<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/6/2
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--解析表达式--%>
<%@ page isELIgnored="false" %>
<%--引入jstl--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<html>
<head>
    <title>权限分配</title>
    <jsp:include page="headerBack.jsp"></jsp:include>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/backEnd/css/zTreeStyle/zTreeStyle.css">
    <script src="${pageContext.request.contextPath}/dist/backEnd/js/zTree/jquery.ztree.core-3.5.js"></script>
    <script src="${pageContext.request.contextPath}/dist/backEnd/js/zTree/jquery.ztree.excheck-3.5.js"></script>

    <SCRIPT type="text/javascript">

        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },

            callback: {
                onCheck: onCheck
            },
            view: {
                selectedMulti: false
            }
        };

        setting.check.chkboxType = { "Y" : "s", "N" : "s" };
        //Y 属性定义 checkbox 被勾选后的情况；
        //N 属性定义 checkbox 取消勾选后的情况；
        //"p" 表示操作会影响父级节点；
        //"s" 表示操作会影响子级节点。

//
//        var setting = {          //设置
//            check: {
//                enable: true
//            },
//            callback: {
//                onCheck: onCheck
//            }};


        //获取所有的节点，绑定到控件上
        var zNodes=new Array();
        <%--alert("${xzpowerList}:"+${xzpowerList});--%>
        <%--alert("${xzpowerList}:"+${xzpowerList.size()});--%>

        <c:forEach var="power" items="${xzpowerList}">
        zNodes.push({ id:"${power.powerNo}", pId:"${power.superNo}", name:"${power.powerName}", open:true})
        </c:forEach>

        var code;


        function setCheck() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                py = $("#py").attr("checked")? "p":"",
                sy = $("#sy").attr("checked")? "s":"",
                pn = $("#pn").attr("checked")? "p":"",
                sn = $("#sn").attr("checked")? "s":"",
                type = { "Y":py + sy, "N":pn + sn};
            zTree.setting.check.chkboxType = type;
            showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
        }
        function showCode(str) {
            if (!code) code = $("#code");
            code.empty();
            code.append("<li>"+str+"</li>");
        }


        
        //保存权限
        function savePower() {
            var SeletedIdList=document.getElementById("SeletedIdList").value;
            SeletedIdList=SeletedIdList.substring(0,SeletedIdList.length-1)
            document.getElementById("SeletedIdList").value=SeletedIdList;

            var myform=document.getElementById("myform");
            myform.submit();
        }

        function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
                nodes=treeObj.getCheckedNodes(true),
                v="";

            for(var i=0;i<nodes.length;i++){
//                v+=nodes[i].name + ",";
                v+=nodes[i].id + ",";
//                alert(nodes[i].id); //获取选中节点的值
            }

            document.getElementById("SeletedIdList").value=v;


            //取消节点
            refreshLayers();
            clearCheckedOldNodes();

        }

        //刷新图层的显示情况
        var layers;
        function refreshLayers() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var changedNodes = zTree.getChangeCheckedNodes();
            for ( var i=0 ; i < changedNodes.length ; i++ ){
                var treeNode = changedNodes[i];
                layers = map.getLayersByName(treeNode.name);
                if(layers!=null && layers[0]!=null){
                    layers[0].setVisibility(treeNode.checked);
                }

                console.log((treeNode?treeNode.name:"root") + "checked " +(treeNode.checked?"true":"false"));
            }
        }
        //清理善后工作
        function clearCheckedOldNodes() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getChangeCheckedNodes();
            for (var i=0, l=nodes.length; i<l; i++) {
                nodes[i].checkedOld = nodes[i].checked;
            }
        };


        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            setCheck();
            $("#py").bind("change", setCheck);
            $("#sy").bind("change", setCheck);
            $("#pn").bind("change", setCheck);
            $("#sn").bind("change", setCheck);

            //回显选中的节点
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo")
            var zTree = zTreeObj.getCheckedNodes(false);
              var pid= "${selectPowerId}"; /**此处数据前后必须拼接;*/


            for (var i = 0; i < zTree.length; i++) {
              if (pid.indexOf(";" + zTree[i].id + ";") != -1) {
                    zTreeObj.expandNode(zTree[i], true); //展开选中的
                    zTreeObj.checkNode(zTree[i], true);
                }
            }
            onCheck();


        });
        
        
        //返回到主页
        function ToRoleShowPage() {
            window.location.href="${pageContext.request.contextPath}/Role/selRoleAll.emp";
        }

    </SCRIPT>

</head>
<body>
<%--&lt;%&ndash;<!--头部开始-->&ndash;%&gt;--%>

<%--&lt;%&ndash;<!-- 导航 -->&ndash;%&gt;--%>
<jsp:include page="leftBack.jsp"></jsp:include>
<!--内容页-->
<div class="main">
    <!--内容页头部-->
    <div class="page-header">
        <div class="pull-left">
            <ol class="breadcrumb visible-sm visible-md visible-lg">
                <li><a href="index.html"><i class="icon fa fa-home"></i>主页</a></li>
                <li class="active"><i class="fa fa-pencil"></i>基本信息</li>
            </ol>
        </div>
        <div class="pull-right">
            <h2>主页</h2>
        </div>
    </div>
    <form action="${pageContext.request.contextPath}/Role/powerAllotPage.emp" name="xzRole" id="myform">
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <div class="right" style="display: none">
                被勾选时：<input type="checkbox" id="py" class="checkbox first" checked /><span>关联父</span>
                <input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>
                取消勾选时：<input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span>
                <input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/>
                <ul id="code" class="log" style="height:20px;"></ul></p>
            </div>
        </div>
        <div style="margin-top: 50px">
            <input type="hidden" id="SeletedIdList" name="SeletedIdList"/>
            <input type="hidden" name="roleId" value="${roleId}"/>
            <c:if test="${xzpowerList.size() >0}">
            <button type="button" onclick="savePower()"  class="btn btn-primary">提交</button>
            </c:if>
            &nbsp;&nbsp;
            <button type="button" class="btn btn-primary" onclick="ToRoleShowPage()">取消</button>
        </div>
    </form>


</div>




</body>
</html>
